<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>demo--入门02</title>
	<script src="jquery-3.4.1.min.js"></script>
<style type="text/css">
	#div1 button{
		width:100px;height: 30px; background: pink;
		font-size:16px;color:red;
	}

	#div1 div{
		width: 350px;
		height: 150px;
		background-color: #eee;
		border:1px solid black;
		color: gray;
		word-wrap: break-word;
		margin-top: 15px;
		display: none;
	}
	#div1 .active{
		background: orange;
	}




</style>
</head>
<body>

<div  id="div1">
	<button class="active">HTML5</button>
	<button>javaScript</button>
	<button>jq</button>

	<div style="display: block;">html5html5html5html5html5html5html5html5html5html5html5html5html5html5html5html5
	</div>

	<div>javaScriptjavaScriptjavaScriptjavaScriptjavaScriptjavaScriptjavaScriptjavaScriptjavaScript
	</div>

	<div>JQueryJQueryJQueryJQueryJQueryJQueryJQueryJQueryJQueryJQueryJQueryJQuery
	</div>


</div>


<script type="text/javascript">


// 原生js实现选项卡
	var oDiv = document.getElementById('div1')
	var aBtns = document.getElementsByTagName('button')
	var aDivs = oDiv.getElementsByTagName("div")

	for(var i=0; i<aBtns.length; i++){
		aBtns[i].index = i
		aBtns[i].onclick = function(){
			//alert(this.index)//获取按钮的下标
			
			//步骤1.清楚按钮的样式
			for(var j=0; j<aBtns.length; i++){
				aBtns[j].className = ""
				aDivs[j].style.display = 'none'
			}

			//2.将当前点击的按钮变成选中
			this.className = 'active'
			aDivs[this.index].style.display = 'block'


		}
	}




</script>


</body>
</html>